<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.tab-box {
				border: 1px solid darkslategray;
			}
			/* display: flex弹性盒子，水平方向*/
			.tab-head {
				display: flex;
			}
			/* flex-grow生长为100%*/
			.tab-head-div {
				flex-grow: 1;
				text-align: center;
				background: #c0c4cc;
				border-right: 1px solid white;
				line-height: 30px;
			}
			.tab-head-div.current {
				background: wheat;
			}
			.tab-body-div {
				display: none;
			}
			.tab-body-div.current {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="tab-box">
			<div class="tab-head">
				<div class="tab-head-div"  onclick="selectTab(0)">k8s集群信息</div>
				<div class="tab-head-div" onclick="selectTab(1)">deployment</div>
				<div class="tab-head-div" onclick="selectTab(2)">service</div>
				<div class="tab-head-div" onclick="selectTab(3)">路由信息</div>
                <div class="tab-head-div" onclick="selectTab(4)">pod信息</div>
			</div>
			<div class="tab-body">
				<div class="tab-body-div current">1</div>
				<div class="tab-body-div">2</div>
				<div class="tab-body-div">3</div>
				<div class="tab-body-div">4</div>
                <div class="tab-body-div">5</div>
			</div>
		</div>
		<script type="text/javascript" src="../static/js/code.js" ></script>
	</body>
</html>